<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="basicinfo">
        <navigation :msg="navMsg"></navigation>
        <div class="basicinfo-top">
          <div @click="tablist(1)" :class="tablistnum == 1 ? 'basicinfo-top-up' : ''">商品分类</div>
          <div @click="tablist(2)" :class="tablistnum == 2 ? 'basicinfo-top-up' : ''">商品单位</div>
          <div @click="tablist(3)" :class="tablistnum == 3 ? 'basicinfo-top-up' : ''">商品标签</div>
          <div @click="tablist(4)" :class="tablistnum == 4 ? 'basicinfo-top-up' : ''">商品规格</div>
          <div @click="tablist(5)" :class="tablistnum == 5 ? 'basicinfo-top-up' : ''">商品品牌</div>
          <div @click="tablist(6)" :class="tablistnum == 6 ? 'basicinfo-top-up' : ''">商品属性</div>
          <div @click="tablist(7)" :class="tablistnum == 7 ? 'basicinfo-top-up' : ''">自定义字段</div>
        </div>
        <!-- 商品分类 -->
        <div v-if="tablistnum === 1" class="tree-list">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <div @click="listAll()">
                <span>全部展开</span>
                <span class="iconfont icon-test189" :class="alllist ? 'fanzhuan' : ''"></span>
              </div>
              <span>可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="tree-list-down">
            <el-tree :data="data" node-key="id" draggable ref="tree">
              <div slot-scope="{ node }" class="tree-index">
                <img src="../../../static/images/100.jpg">
                <p>{{node.label}}</p>
              </div>
            </el-tree>
          </div>
        </div>
        <!-- 商品单位 -->
        <div v-if="tablistnum === 2" class="unit">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <span>可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="unit-down">
            <draggable>
              <li v-for="(item,index) in unitData" :key="index">{{item}}</li>
            </draggable>
          </div>
        </div>
        <!-- 商品标签 -->
        <div v-if="tablistnum === 3" class="labels">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <span>标签可用于订货时快速筛选，标签数量不限，每个商品最多可添加三个标签，可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="labels-down">
            <draggable draggable=".b">
              <li
                v-for="(item,index) in labelsData"
                :key="index"
                :disabled="item.disabled"
                :class="item.classed"
              >
                <span :style="{backgroundColor:item.color}">{{item.name}}</span>
              </li>
            </draggable>
          </div>
        </div>
        <!-- 商品规格 -->
        <div v-if="tablistnum === 4" class="cations">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <span></span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="cations-down">
            <el-table :data="cationsData" :height="tableHeight">
              <el-table-column label="规格名称" prop="name" min-width="20%"></el-table-column>
              <el-table-column label="规格值" min-width="70%">
                <template slot-scope="scope">
                  <div class="cations-down-content">
                    <span v-for="(item,index) in scope.row.content" :key="index">{{item}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="10%"></el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 商品品牌 -->
        <div v-if="tablistnum === 5" class="unit">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <span>可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="unit-down">
            <draggable>
              <li v-for="(item,index) in unitData" :key="index">{{item}}</li>
            </draggable>
          </div>
        </div>
        <!-- 商品属性 -->
        <div v-if="tablistnum === 6" class="attribute">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <div @click="listAll()">
                <span>全部展开</span>
                <span class="iconfont icon-test189" :class="alllist ? 'fanzhuan' : ''"></span>
              </div>
              <span>最多可设置8个一级属性，可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="attribute-down">
            <el-tree :data="attributeData" node-key="id" draggable ref="tree">
              <div slot-scope="{ node }" class="attribute-index">
                <p>{{node.label}}</p>
              </div>
            </el-tree>
          </div>
        </div>
        <!-- 自定义 -->
        <div v-if="tablistnum === 7" class="unit">
          <div class="tree-list-top">
            <div class="tree-list-top-left">
              <span>最多可设置10个自定义字段，可拖动行修改排序</span>
            </div>
            <div class="tree-list-top-right">
              <span class="iconfont icon-test247 left"></span>
              <span>新增</span>
            </div>
          </div>
          <div class="unit-down">
            <draggable>
              <li v-for="(item,index) in customData" :key="index">{{item}}</li>
            </draggable>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      alllist: false,
      data: [
        {
          id: 1,
          label: '衣服',
          children: [
            {
              id: 11,
              label: '饮料'
            }
          ]
        },
        {
          id: 2,
          label: '毛衣',
          children: [
            {
              id: 21,
              label: '打底袜'
            },
            {
              id: 22,
              label: '袜子',
              children: [
                {
                  id: 221,
                  label: '隐形袜'
                },
                {
                  id: 222,
                  label: '运动袜'
                },
                {
                  id: 223,
                  label: '儿童袜'
                },
                {
                  id: 224,
                  label: '堆堆袜'
                },
                {
                  id: 225,
                  label: '商务袜'
                }
              ]
            }
          ]
        },
        {
          id: 3,
          label: '卫衣'
        },
        {
          id: 4,
          label: '连衣裙'
        },
        {
          id: 5,
          label: '打底衫'
        },
        {
          id: 6,
          label: '短袖T恤'
        },
        {
          id: 7,
          label: '下装',
          children: [
            {
              id: 71,
              label: '短裤'
            },
            {
              id: 72,
              label: '铅笔裤'
            },
            {
              id: 73,
              label: '打底裤'
            },
            {
              id: 74,
              label: '牛仔裤'
            },
            {
              id: 75,
              label: '半身裤'
            },
            {
              id: 76,
              label: '短裙'
            }
          ]
        },
        {
          id: 8,
          label: '上装',
          children: [
            {
              id: 81,
              label: '针织衫'
            },
            {
              id: 82,
              label: '衬衫'
            }
          ]
        },
        {
          id: 9,
          label: '箱包',
          children: [
            {
              id: 91,
              label: '鞋子',
              children: [
                {
                  id: 911,
                  label: '其他'
                },
                {
                  id: 912,
                  label: '凉鞋'
                },
                {
                  id: 913,
                  label: '粗跟'
                },
                {
                  id: 914,
                  label: '中跟'
                },
                {
                  id: 915,
                  label: '细跟'
                },
                {
                  id: 916,
                  label: '厚底松糕鞋'
                }
              ]
            },
            {
              id: 92,
              label: '双肩包'
            },
            {
              id: 93,
              label: '水桶包'
            },
            {
              id: 94,
              label: '手提包'
            },
            {
              id: 95,
              label: '拉杆箱'
            },
            {
              id: 96,
              label: '小方包'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      navMsg: [
        {
          name: '商品',
          path: '/commodityList'
        },
        {
          name: '基础信息',
          path: '/basicInformation'
        }
      ],
      tablistnum: 1,
      tableHeight: window.innerHeight - 220,
      unitData: ['箱', '盒', '件', '手', '条', '件666', '双', '1', 'PCS', '3'],
      labelsData: [
        {
          name: '新品',
          color: '#FF9F13',
          disabled: false,
          classed: 'a'
        },
        {
          name: '推荐',
          color: '#F13131',
          disabled: false,
          classed: 'a'
        },
        {
          name: '热销',
          color: '#FF6350',
          disabled: false,
          classed: 'a'
        },
        {
          name: '爆款',
          color: '#33CCCC',
          disabled: false,
          classed: 'b'
        },
        {
          name: '评价',
          color: '#20ADE5',
          disabled: false,
          classed: 'b'
        }
      ],
      cationsData: [
        {
          name: '颜色',
          content: [
            '红色',
            '绿色',
            '蓝色',
            '红色',
            '绿色',
            '蓝色',
            '红色',
            '绿色',
            '蓝色',
            '红色',
            '绿色',
            '蓝色',
            '红色',
            '绿色',
            '蓝色',
            '红色',
            '绿色',
            '蓝色'
          ]
        },
        {
          name: '尺寸',
          content: ['25', '26', '27', '28', '29']
        }
      ],
      attributeData: [
        {
          id: 1,
          label: '季节',
          children: [
            {
              id: 11,
              label: '春季'
            },
            {
              id: 12,
              label: '夏季'
            },
            {
              id: 13,
              label: '秋季'
            },
            {
              id: 14,
              label: '冬季'
            }
          ]
        },
        {
          id: 2,
          label: '风格',
          children: [
            {
              id: 21,
              label: '复古'
            },
            {
              id: 22,
              label: '时尚'
            },
            {
              id: 23,
              label: '奢侈'
            },
            {
              id: 24,
              label: '123'
            }
          ]
        }
      ],
      customData: ['季节', '排序值', '季节']
    }
  },
  created () {
    this.$nextTick(() => {
      document.getElementsByClassName('tree-list-down')[0].style.height =
        this.tableHeight + 'px'
      document.getElementsByClassName('tree-list-down')[0].style.overflow =
        'scroll'
      document.getElementsByClassName('tree-list-down')[0].style.overflowX =
        'hidden'
    })
  },
  methods: {
    listAll () {
      this.alllist = !this.alllist
      this.$nextTick(() => {
        for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = this.alllist
        }
      })
    },
    tablist (num) {
      this.tablistnum = num
      this.alllist = false
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    draggable
  }
}
</script>

<style lang="scss" scoped>
.basicinfo {
  width: 100%;
  margin-right: 10px;
  overflow: hidden;
  .basicinfo-top {
    display: flex;
    background-color: #fff;
    line-height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #e3e3e3;
    div {
      padding: 0 20px;
      color: #999;
    }
    div:hover {
      color: #61ade7;
    }
    .basicinfo-top-up {
      border-bottom: 2px solid #61ade7;
      font-weight: 700;
      color: #61ade7;
      height: 49px;
    }
  }

  .tree-list,
  .unit,
  .labels,
  .cations,
  .attribute {
    .tree-list-top {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #e3e3e3;
      padding: 0 30px;
      .tree-list-top-left {
        display: flex;
        font-size: 14px;
        align-items: center;
        .fanzhuan {
          transform: rotate(180deg);
        }
        div {
          margin-right: 30px;
          align-items: flex-end;
          span {
            color: #000;
          }
        }
        span {
          margin: 0;
          height: 50px;
          color: #999;
        }
      }
      .tree-list-top-right {
        span {
          margin: 0;
          display: inline-block;
          text-align: center;
          line-height: 20px;
          margin-right: 5px;
          color: #61ade7;
        }
        .left {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #61ade7;
          color: #fff;
        }
      }
    }
  }
  /deep/ .tree-list {
    div {
      div {
        .el-tree-node {
          .el-tree-node__content {
            padding: 20px 0 !important;
            border-bottom: 1px solid #e3e3e3;
          }
          .el-tree-node__content:hover {
            cursor: move;
          }
          .el-tree-node__children {
            padding-left: 50px;
            .el-tree-node__content {
              padding: 20px 0 !important;
              border-bottom: 1px solid #e3e3e3;
            }
          }
        }
        span {
          display: inline-block;
          margin: 0 10px 0 10px;
        }
      }
    }
    .tree-list-down {
      background-color: #fff;
      .tree-index {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
      }
    }
  }
  .unit-down {
    background-color: #fff;
    li {
      background-color: #fff;
      border-bottom: 1px solid #f3f3f3;
      line-height: 50px;
      padding: 0 40px;
      font-size: 12px;
      color: #999;
    }
    li:hover {
      cursor: move;
    }
  }
  .labels {
    .labels-down {
      background-color: #fff;
      li {
        background-color: #fff;
        border-bottom: 1px #f3f3f3 solid;
        line-height: 50px;
        padding: 0 40px;
        font-size: 12px;
        color: #fff;
        span {
          display: inline-block;
          width: 36px;
          height: 23px;
          line-height: 23px;
          text-align: center;
          border-radius: 2px;
        }
      }
      li:hover {
        background-color: #f1f8ff;
      }
      .a:hover {
        cursor: no-drop;
      }
    }
  }
  /deep/ .cations {
    .el-table thead tr td {
      border-bottom: 1px solid #f3f3f3;
    }
    .el-table tbody tr:hover > td {
      background-color: #fff;
    }
    .el-table tbody tr td {
      padding: 3px;
    }
    .cations-down {
      overflow: hidden !important;
      .cations-down-content {
        span {
          display: inline-block;
          padding: 3px 15px;
          background-color: #f3f3f3;
          margin: 3px 5px;
          border-radius: 5px;
          line-height: 30px;
        }
      }
    }
  }
  /deep/ .attribute {
    background-color: #fff;
    .attribute-down {
      font-size: 12px;
      .el-tree {
        .el-tree-node {
          .el-tree-node__content {
            padding: 20px 0 !important;
            border-bottom: 1px solid #e3e3e3;
          }
          .el-tree-node__content:hover {
            cursor: move;
          }
          .el-tree-node__children {
            padding-left: 50px;
            .el-tree-node__content {
              padding: 20px 0 !important;
              border-bottom: 1px solid #e3e3e3;
            }
          }
        }
        span {
          display: inline-block;
          margin: 0 10px 0 10px;
        }
      }
    }
  }
}
</style>
